<template>
    <el-card>
        <div slot="header">系统状态
            <el-button @click="fetch" type="success" :loading="loading.data">刷新</el-button>
        </div>
        <el-form label-width="120px" v-loading="loading.data">
            <el-form-item label="用户数量">
                {{data.users}}
            </el-form-item>
            <el-form-item label="用户操作记录">
                {{data.events}}
            </el-form-item>
            <el-form-item label="主播数量">
                {{data.anchors}}
            </el-form-item>
            <el-form-item label="项目数量">
                {{data.projects}}
            </el-form-item>
            <el-form-item label="截图程序情况">
                <el-table :data="data.screenshotClients">
                    <el-table-column label="名称" prop="name"/>
                    <el-table-column label="截图成功数量" prop="success"/>
                    <el-table-column label="截图失败数量" prop="fail"/>
                    <el-table-column label="等待执行的任务数量" prop="wait"/>
                    <el-table-column label="工作时间" prop="started_at"/>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="restartClient(scope.row)">重启程序</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>如果任务堆积数量只多不少，有可能是截图程序卡住了，请使用重启按钮</div>
                <div>但也有可能是程序执行任务比新任务来的慢导致的，这时候建议多配置一台电脑运行截图程序</div>
            </el-form-item>
            <el-form-item label="文件数量">
                {{data.files}}
            </el-form-item>
            <el-form-item label="文件容量">
                {{data.filesSize}}
            </el-form-item>
            <el-form-item label="系统清理">
                <p>
                    删除
                    <el-date-picker v-model="clear.date" :editable="false"/>
                    之前的
                    <el-select v-model="clear.all" placeholder="请选择">
                        <el-option :value="0" label="未使用的"/>
                        <el-option :value="1" label="全部"/>
                    </el-select>
                    文件(包括硬广截图，主播截图，日志邮件数据图，日志邮件附件)
                    <br>
                    确认删除后，会先给文件打上需要删除的标识，然后每天00:00系统才会自动删除文件，这样可以确保不会在繁忙时段消耗服务器性能。
                </p>
                <el-button @click="clearFunction" :loading="loading.clear" :disabled="clear.all === ''" type="warning">
                    删除
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import ms from 'ms';

    export default {
        data() {
            return {
                loading: {data: true, clear: false},
                data: {
                    users: 0,
                    anchors: 0,//主播
                    projects: 0,//项目
                    files: 0,//截图文件
                    filesSize: '',//截图文件的容量
                    events: 0,//用户操作记录数量
                    screenshotClients: [],
                },
                clear: {date: new Date(Date.now() - ms('6 day')), all: ''},
            }
        },
        methods: {
            fetch() {
                this.loading.data = true;
                this.$http.get('/api/system').then(res => {
                    this.loading.data = false;
                    this.data = res.data;
                }).catch(err => {
                    this.loading.data = false;
                });
            },
            clearFunction() {
                this.$http.get('/api/system/clear_file_count', {params: this.clear})
                    .then(({data}) => {
                        this.$confirm(data, '确认删除？').then(() => {
                            this.loading.clear = true;
                            this.$http.get('/api/system/clear_file', {params: this.clear}).then(res => {
                                this.loading.clear = false;
                                this.$message.success(res.data);
                                this.fetch();
                            });
                        });
                    })
                    .catch(err => {
                        this.$message.error(err.response.data);
                    });
            },
            restartClient(row) {
                this.$confirm('重启 ' + row.name + ' ?', {type: 'warning'}).then(() => {
                    this.$http.get('/api/system/restart-client/' + row.id).then(res => {
                        this.$message.success(res.data);
                    }).catch(err => {
                        this.$message.error(err.response.data);
                    });
                }).catch(() => {
                });
            }
        },
        mounted() {
            this.fetch();
        },
    }
</script>

<style scoped>

</style>